    <!DOCTYPE html>
<html>
<head>
    <title>我的收藏</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategy.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <script>
        //定义当前页
        var currentPage = 1;
        //定义总页数
        var pages;
        //定义一个内容集合
        var collect;
        $(function () {
            //获取当前对象的id
            var user = sessionStorage.getItem("user");
            var json = JSON.parse(user);
            //定义一个类型初始化化为日报
            var type = 1;
            //定义一个路径页面
            var htmlString = "/newsContent.html";

            //进入页面中进请求渲染 默认是日报
            $.get("/collect",{userId:json.id,type:type,pageSize:4},function (data) {
                currentPage = 1;
                pages = data.pages;
                collect = data.list;
                $("#pills-"+type).renderValues(data,{
                    //设置a标签中的路径
                    handle:function (ele, value) {
                        ele.href =htmlString+"?id="+value;
                    }
                });
            });

            //设置选项卡点击事件
            $("#pills-tab .nav-link").click(function () {
                //拿到选项卡a 标签中的类型数值
                type = $(this).data("tid");
                //判断类型数值 (1为日报,2为攻略,3为游记)
                if (type == 1){
                    htmlString = "/newsContent.html";
                } else  if (type == 2) {
                    htmlString = "/strategyCatalogs.html";
                }else if (type == 3){
                    htmlString = "/travelContent.html";
                }

                //发出请求查询收藏内容
                $.get("/collect",{userId:json.id,type:type,pageSize:4},function (data) {
                    currentPage = 1;
                    pages = data.pages;
                    collect = data.list;
                    $("#pills-"+type).renderValues(data,{
                        //设置a标签中的路径
                        handle:function (ele, value) {
                            ele.href =htmlString+"?id="+value;
                        }
                    });
                });


            })
            //设置滚动事件
            $(window).scroll(function () {
                //判断是否到底
                if (isEnd()){
                    //判断是否有下一页
                    if (currentPage < pages) {
                        currentPage ++;
                        //查询第二页
                        $.get("/collect",{userId:json.id,type:type,currentPage:currentPage,pageSize:4},function (data) {
                            $.merge(collect,data.list);
                            $("#pills-"+type).renderValues({list:collect},{

                                handle:function (ele, value) {
                                    ele.href =htmlString+"?id="+value;
                                }
                            });
                        });

                    }else {
                        // 否则, 提示已到低
                        $(document).dialog({
                            type : 'notice',
                            infoText: '到底了',
                            autoClose: 2500,
                            position: 'bottom'  // center: 居中; bottom: 底部
                        });
                    }
                    console.log(currentPage);
                }
            })



        });

        // 定义一个判断屏幕溢出高度 + 屏幕高度 > 网页高度的函数
        function isEnd() {
            return $(window).height() + parseInt( $(window).scrollTop() + 1 ) >= $(document).height();
        }

    </script>
</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col-2">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col-10">
            <div class="input-group-sm search">
                <input class="form-control searchBtn" placeholder="找收藏">
            </div>
        </div>
    </div>
</div>

<ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab" role="tablist">

    <li class="nav-item">
    <a data-tid="1" class="nav-link"  data-toggle="pill" href="#pills-1">日报</a>
    </li>
    <li class="nav-item">
    <a data-tid="2" class="nav-link" data-toggle="pill" href="#pills-2">攻略</a>
    </li>
    <li class="nav-item">
    <a data-tid="3" class="nav-link" data-toggle="pill" href="#pills-3">游记</a>
    </li>
</ul>

<div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade active show" id="pills-1">
        <div class="container">
            <h6>收藏的日报</h6>
            <div class="row" render-loop="list">
                <div class="col-6">
                    <a data-id="2" render-key="list.id" render-fun="handle">
                        <img class="rounded" width="100%" height="110px"  render-src="list.coverUrl">
                    </a>
                    <div class="caption">
                        <p>
                            <span > </span>
                            <!--<i class="fa fa-heart-o"></i>-->
                        </p>
                        <a render-key="list.id" render-fun="handle">
                            <p render-html="list.title"></p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-pane fade" id="pills-2">
        <div class="container">
            <h6>收藏的攻略</h6>
            <div class="row " render-loop="list">
                <div style="margin-bottom: 1px">
                    <a render-key="list.id" render-fun="handle">
                        <div class="row news-detail">
                            <div class="col-7">
                                <img render-src="list.coverUrl">
                            </div>
                            <div class="col-5">
                                <h4 render-html="list.title"></h4>
                                <p> </p>
                            </div>
                        </div>
                    </a>
                    <hr>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-pane fade" id="pills-3">
        <div class="container">
            <h6>收藏游记</h6>
            <div id="allTravels" render-loop="list">

                <div class="row news-detail">
                    <div class="col">
                        <a render-key="list.id" render-fun="handle">
                            <h4 render-html="list.title"></h4>
                        </a>
                        <p>
                            <a href="userProfiles.html">
                                <img class="rounded-circle head-img" render-src="list.author.headImgUrl">
                                <span render-html="list.author.nickName"></span> </a>
                            <span class="addr" render-html="list.place.name"></span>
                        </p>
                        <p>
                            <i class="fa fa-eye fa-fw"></i>
                            <span>100</span>
                            <i class="fa fa-commenting fa-fw"></i>
                            <span>100</span>
                        </p>
                    </div>
                    <div class="col-6">
                        <a href="travelContent.html"  render-key="list.id" render-fun="handle" >
                            <img render-src="list.coverUrl">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>